<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市选择</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/city.css">
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
</head>
<body>
    <div class="city-header">
        <div class="w_1150">
            <div class="logo">
                <img src="images/logo.jpg">
            </div>
            <div class="search-input">
                <i class="iconfont">&#xe651;</i>
                <input class="searchVal" placeholder="请输入区域、商圈或小区名开始找房">
                <input class="btn ico-search" value="开始找房" type="button">
            </div>
        </div>
    </div>
    <div class="w_1150">
        <div class="city-con">
            <div class="hot-list">
                <div class="city_tit">热门城市:</div>
                <ul class="city_recommend_list">
                    <li><a href="">北京</a></li>
                    <li><a href="">上海</a></li>
                    <li><a href="">深圳</a></li>
                </ul>
            </div>
            <div class="hot-list" id="linkage">
                <div class="city_tit">城市选择:</div>
                <div class="copy-select iconfont" id="province">
                    <input type="text" name="province" id="getProvinceValue" readonly value="省份">
                    <ul></ul>
                </div>
                <div class="copy-select iconfont" id="city">
                    <input type="text" name="city" id="getCityValue" readonly value="城市">
                    <ul></ul>
                </div>
                <input id="pLiIndex" type="hidden" value="" />
            </div>
            <div class="city_recommend">
               <div class="city-item">
                   <div class="city_list_section">
                       <ul class="city_list_ul">
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>A</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">安徽</div>
                                       <ul>
                                            <li><a href="">滁州</a></li>
                                            <li><a href="">合肥</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>B</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">北京</div>
                                       <ul>
                                            <li><a href="">北京</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>C</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">重庆</div>
                                       <ul>
                                            <li><a href="">重庆</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>F</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">福建</div>
                                       <ul>
                                            <li><a href="">龙岩</a></li>
                                            <li><a href="">泉州</a></li>
                                            <li><a href="">厦门</a></li>
                                            <li><a href="">漳州</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>G</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">广东</div>
                                       <ul>
                                            <li><a href="">东莞</a></li>
                                            <li><a href="">佛山</a></li>
                                            <li><a href="">广州</a></li>
                                            <li><a href="">惠州</a></li>
                                            <li><a href="">清远</a></li>
                                            <li><a href="">深圳</a></li>
                                            <li><a href="">珠海</a></li>
                                            <li><a href="">中山</a></li>
                                        </ul>
                                   </div>
                                   <div class="city_province">
                                       <div class="city_list_tit">湖北</div>
                                       <ul>
                                            <li><a href="">黄冈</a></li>
                                            <li><a href="">武汉</a></li>
                                            <li><a href="">咸宁</a></li>
                                        </ul>
                                   </div>
                                   <div class="city_province">
                                       <div class="city_list_tit">湖南</div>
                                       <ul>
                                            <li><a href="">长沙</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>H</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">河北</div>
                                       <ul>
                                            <li><a href="">保定</a></li>
                                            <li><a href="">承德</a></li>
                                            <li><a href="">邯郸</a></li>
                                            <li><a href="">衡水</a></li>
                                            <li><a href="">廊坊</a></li>
                                            <li><a href="">秦皇岛</a></li>
                                            <li><a href="">石家庄</a></li>
                                            <li><a href="">邢台</a></li>
                                            <li><a href="">张家口</a></li>
                                        </ul>
                                   </div>
                                   <div class="city_province">
                                       <div class="city_list_tit">海南</div>
                                       <ul>
                                            <li><a href="">保亭</a></li>
                                            <li><a href="">澄迈</a></li>
                                            <li><a href="">儋州</a></li>
                                            <li><a href="">安定</a></li>
                                            <li><a href="">海口</a></li>
                                            <li><a href="">临高</a></li>
                                            <li><a href="">乐东</a></li>
                                            <li><a href="">陵水</a></li>
                                            <li><a href="">琼海</a></li>
                                            <li><a href="">三亚</a></li>
                                            <li><a href="">五指山</a></li>
                                            <li><a href="">文昌</a></li>
                                            <li><a href="">万宁</a></li>
                                        </ul>
                                   </div>
                                   <div class="city_province">
                                       <div class="city_list_tit">河南</div>
                                       <ul>
                                            <li><a href="">郑州</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>J</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">江苏</div>
                                       <ul>
                                            <li><a href="">南京</a></li>
                                            <li><a href="">南通</a></li>
                                            <li><a href="">苏州</a></li>
                                            <li><a href="">无锡</a></li>
                                            <li><a href="">徐州</a></li>
                                            <li><a href="">镇江</a></li>
                                        </ul>
                                   </div>
                                   <div class="city_province">
                                       <div class="city_list_tit">吉林</div>
                                       <ul>
                                            <li><a href="">长春</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>L</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">辽宁</div>
                                       <ul>
                                            <li><a href="">大连</a></li>
                                            <li><a href="">沈阳</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>N</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">内蒙古</div>
                                       <ul>
                                            <li><a href="">呼和浩特</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>S</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">上海</div>
                                       <ul>
                                            <li><a href="">上海</a></li>
                                        </ul>
                                   </div>
                                   <div class="city_province">
                                       <div class="city_list_tit">四川</div>
                                       <ul>
                                            <li><a href="">成都</a></li>
                                            <li><a href="">德阳</a></li>
                                            <li><a href="">乐山</a></li>
                                            <li><a href="">眉山</a></li>
                                        </ul>
                                   </div>
                                   <div class="city_province">
                                       <div class="city_list_tit">山东</div>
                                       <ul>
                                            <li><a href="">济南</a></li>
                                            <li><a href="">青岛</a></li>
                                            <li><a href="">威海</a></li>
                                            <li><a href="">烟台</a></li>
                                        </ul>
                                   </div>
                                   <div class="city_province">
                                       <div class="city_list_tit">陕西</div>
                                       <ul>
                                            <li><a href="">西安</a></li>
                                        </ul>
                                   </div>
                                   <div class="city_province">
                                       <div class="city_list_tit">山西</div>
                                       <ul>
                                            <li><a href="">晋中</a></li>
                                            <li><a href="">太原</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>T</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">天津</div>
                                       <ul>
                                            <li><a href="">天津</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>Y</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">云南</div>
                                       <ul>
                                            <li><a href="">大理</a></li>
                                            <li><a href="">昆明</a></li>
                                            <li><a href="">西双版纳</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                           <li class="city_list_li">
                               <div class="city_firstletter">
                                   <span>Z</span>
                               </div>
                               <div class="city_list">
                                   <div class="city_province">
                                       <div class="city_list_tit">浙江</div>
                                       <ul>
                                            <li><a href="">杭州</a></li>
                                            <li><a href="">嘉兴</a></li>
                                            <li><a href="">绍兴</a></li>
                                        </ul>
                                   </div>
                               </div>
                           </li>
                       </ul>
                   </div>
               </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery-1.8.1.js"></script>
    <script type="text/javascript" src="js/address.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#linkage").linkage("#province", "#city", ".copy-select");
        });
    </script>
</body>
</html>